<template>
  <!-- 页面布局 -->
  <div>
    <el-container>
      <el-header height="65px" :style="{ 'border-bottom': '1px solid #ccc' }">
        <!-- 头部按钮 -->
        <el-row type="flex" justify="end" style="background-color: rgb(211, 227, 253)">
          <div>
            <el-button @click="getAllData" type="primary"> 生成</el-button>
            <el-button @click="printQRCode" type="primary"> 二维码</el-button>

            <el-button @click="iuAllData" type="primary"> 保存</el-button>
          </div>
          <!-- <div class="title">需求汇总统计表</div> -->
        </el-row>

        <!-- style="text-align: center" -->
        <!-- background:rgb(241,244,243) ; -->
        <div
          style="margin-left:6rem;height: 30px;width=100%; background:rgb(241,244,243);margin-bottom: 0;position: relative; display: flex; justify-content: flex-start;"
        ></div>
      </el-header>
      <el-container>
        <el-main style="padding: 2px 2px 0 2px; margin-left: 6rem">
          <div :style="{ height: screenHeight + 'px' }">
            <el-form :model="formMainTable" :inline="true">
              <el-row :gutter="0">
                <el-form-item class="labs" style="margin-right: 0">
                  <label class="lab" style="width: 100px; padding-right: 5px">
                    <span style="color: red">*</span>
                    工序</label
                  >
                  <el-select
                    filterable
                    v-model="formMainTable.process"
                    style="width: 180px"
                  >
                    <el-option label="轧机" value="Z"></el-option>
                    <!-- <el-option label="退火" value="T"></el-option>
                  <el-option label="拉胶" value="L"></el-option>
                  <el-option label="分条" value="F"></el-option>
                  <el-option label="清洗" value="Q"></el-option> -->
                  </el-select>
                </el-form-item>
                <el-form-item class="labs" style="margin-right: 0">
                  <label class="lab" style="width: 100px; padding-right: 5px">
                    <span style="color: red">*</span>
                    设备结构</label
                  >
                  <el-select
                    filterable
                    v-model="formMainTable.equipment"
                    style="width: 180px"
                  >
                    <el-option label="1#轧机" value="A"></el-option>
                    <el-option label="2#轧机" value="B"></el-option>
                    <el-option label="3/4轧机" value="C"></el-option>
                    <!-- <el-option label="1号退火炉" value="A"></el-option>
                  <el-option label="2号退火炉" value="B"></el-option>
                  <el-option label="3号退火炉" value="C"></el-option>
                  <el-option label="4号退火炉" value="D"></el-option>
                  <el-option label="5号退火炉" value="E"></el-option> -->
                  </el-select>
                </el-form-item>
                <el-form-item class="labs" style="margin-right: 0">
                  <label class="lab" style="width: 100px; padding-right: 5px">
                    <span style="color: red">*</span>
                    辊系</label
                  >
                  <el-select
                    filterable
                    v-model="formMainTable.roller_system"
                    style="width: 180px"
                  >
                    <el-option label="工作辊" value="01"></el-option>
                    <el-option label="除油辊" value="02"></el-option>
                    <el-option label="一中间辊" value="03"></el-option>
                    <el-option label="传动辊" value="04"></el-option>
                    <el-option label="堕辊" value="05"></el-option>
                    <el-option label="背衬" value="06"></el-option>
                    <el-option label="转向" value="07"></el-option>
                    <el-option label="张力辊" value="08"></el-option>
                    <el-option label="支承辊" value="09"></el-option>
                  </el-select>
                </el-form-item>
              </el-row>
              <el-row :gutter="0">
                <el-form-item class="labs" style="margin-right: 0; margin-top: 10px">
                  <label class="lab" style="width: 100px; padding-right: 5px">
                    是否扎花
                  </label>
                  <el-checkbox v-model="formMainTable.isFl" style="width: 180px">
                    {{ formMainTable.isFl ? "XX" : "OO" }}
                  </el-checkbox>
                </el-form-item>
                <el-form-item class="labs" style="margin-right: 0">
                  <label class="lab" style="width: 100px; padding-right: 5px">
                    周期码
                  </label>
                  <el-input
                    disabled
                    style="width: 180px"
                    v-model="formMainTable.perCode"
                  />
                </el-form-item>
                <el-form-item class="labs" style="margin-right: 0">
                  <label class="lab" style="width: 100px; padding-right: 5px">
                    标识号
                  </label>
                  <el-input
                    disabled
                    style="width: 180px"
                    v-model="formMainTable.identification_number"
                  />
                </el-form-item>
              </el-row>
            </el-form>
            <!-- 二维码占位符 -->
            <div id="qrcode-container" class="demo-image__placeholder">
              <div class="block">
                <qrcode-vue
                  :value="formMainTable.identification_number"
                  size="300"
                ></qrcode-vue>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {
  ref,
  watch,
  reactive,
  onMounted,
  onBeforeMount,
  computed,
  nextTick,
  onUnmounted,
  toRefs,
} from "vue";
import { ElTable, TableColumnCtx } from "element-plus";
import { Delete, Edit, Search, Share, Upload, Calendar } from "@element-plus/icons-vue";
import { ElButton, ElDialog, dialogEmits, ElMessage } from "element-plus";
import { CircleCloseFilled } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import axios from "../../../axios/axiosInstance.ts";
import Cookies from "js-cookie";
import { formatNumberToCurrency } from "@/utils/formatUtils";
// crud封装组件
import * as crud from "../../../components/utils/crud.ts";
import * as newCrud from "../../../components/utils/newCrud.ts";

import SearchTableDialog from "@/components/dialogs/SearchTableDialog.vue";
import * as notifications from "../../../components/utils/notification.ts";
import Co from "../../../components/utils/t-ui-plus-dev/packages/select-table/src/index.vue";
// 日期中文
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import moment from "moment";
import QrcodeVue from "qrcode.vue";
import printJS from "print-js";

const router = useRouter();
// 权限控制
const searchButtonPermissions11 = ref(false);
const menuId = ref(11);
const buttonVariables = {
  searchButtonPermissions11,
};
const selectPermissionsButton = () => {
  const userName = Cookies.get("userName");

  axios({
    url: "/select/Permissions/Button",
    method: "post",
    data: {
      userName: userName,
      menuId: menuId.value,
    },
  }).then((res) => {
    res.data.forEach((button) => {
      const buttonName = button.buttonName;
      if (buttonVariables.hasOwnProperty(buttonName)) {
        buttonVariables[buttonName].value = true;
      }
    });
  });
};
selectPermissionsButton();

// 计算高度
const screenHeight = ref(null);

const getScreenHeight = () => {
  console.log(window.innerHeight);
  screenHeight.value = window.innerHeight - 109;
};
getScreenHeight();
const formMainTable = ref({
  f_date: "",
  create_person_id: "",
  create_person_name: "",
  create_datatime: "",
  process: "", //工序
  equipment: "", //设备
  roller_system: "", //辊系
  serial_number: "", //流水号
  identification_number: "", //标识号
  isFl: false, //是否轧花
  perCode: "A", //周期码
});
// 添加业务员
const getUserId = async () => {
  const userName = Cookies.get("userName");
  const res = await crud.fetchData("UserDe/getUserDe", "post", {
    input5: userName,
  });
  console.log(res);

  const timestamp = new Date().getTime();
  const fdateTime = moment(timestamp).format("YYYY-MM-DD HH:mm:ss");
  const fdate = moment(timestamp).format("YYYY-MM-DD");
  //制单人
  formMainTable.value.create_person_id = res[0].userId;
  formMainTable.value.create_person_name = res[0].userName;
  formMainTable.value.create_datatime = fdateTime;
};
getUserId();
const isTrue = ref(true);
const isRole = () => {
  isTrue.value = true;
  if (!formMainTable.value.process) {
    notifications.showMessage("请选择工序", "error");
    return;
  }
  if (!formMainTable.value.equipment) {
    notifications.showMessage("请选择设备结构", "error");
    return;
  }
  if (!formMainTable.value.roller_system) {
    notifications.showMessage("请选择辊系", "error");
    return;
  }
  isTrue.value = false;
};
const getAllData = async () => {
  try {
    await isRole();
    if (isTrue.value) {
      return;
    }
    const jsonObj = {
      info: formMainTable.value,
      entity: {},
    };
    const res = await newCrud.fetchData("/qrcode/getQRrCode", "post", jsonObj);
    console.log(res);
    formMainTable.value.serial_number = res.QrCode.slice(-3);
    formMainTable.value.f_date = res.QrCode.slice(0, 4);

    const isFl = formMainTable.value.isFl ? "XX" : "OO";
    const perCode = formMainTable.value.perCode;
    const finalQrCode = `${res.QrCode}${isFl}${perCode}`;
    formMainTable.value.identification_number = finalQrCode;
  } catch (error) {
    console.error("请求失败:", error);
  }
};
const iuAllData = async () => {
  try {
    if (!formMainTable.value.identification_number) {
      notifications.showMessage("请先生成标识号", "error");
      return;
    }
    const result = await notifications.showConfirmDialog("", "请确认保存", "success");
    if (!result) {
      return;
    }

    //  row_num
    formMainTable.value.isFl = formMainTable.value.isFl ? "XX" : "OO";
    const jsonObj = {
      info: formMainTable.value,
      entity: {},
    };
    const res = await newCrud.sendRequest("/qrcode/iuQRrCode", "post", jsonObj);
    if (res.code == 200 || res.code == 1) {
      OFFdialogTableVisible();
    }
  } catch (error) {
    console.error("请求失败:", error);
  }
};
const printQRCode = () => {
  printJS({
    printable: "qrcode-container",
    type: "html",
    css: "", // 可以指定样式
    scanStyles: false,
  });
};
</script>
<style scoped>
.custom-dialog {
  position: fixed;
  top: 10em;
  left: 50%;
  width: 20%;
  /* 其他样式... */
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.labs {
  margin-bottom: 0px;
}

.lab {
  background-color: rgba(247, 247, 247, 0.903);
  /* border-radius: 5px; */
  text-align: center;
  margin-bottom: 0px;
  text-align: right;
}
.demo-image__placeholder .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image__placeholder .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.demo-image__placeholder .el-image {
  padding: 0 5px;
  max-width: 800px;
  max-height: 800px;
}

.demo-image__placeholder.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 14px;
}
.demo-image__placeholder .dot {
  animation: dot 2s infinite steps(3, start);
  overflow: hidden;
}
</style>
